<template>
	<view>
		<u-sticky bg-color="#fff" offset-top="0" h5-nav-height="0">
			<view class="topbar">
				<u-navbar title="" :border-bottom="false">
					<view class="search-bar">
						<input type="text" class="search" v-model="keywords" placeholder="请输入城市" />
						<u-icon class="icon" name="search" color="#919191" size="28"></u-icon>
					</view>
					<view slot="right" class="text-primary btn" @click="getSearch">搜索</view>
				</u-navbar>
			</view>
		</u-sticky>
		
		<my-nodata type="5" text="啥 也 没 有 呢" style="margin-top: 20vw;" v-show="JSON.stringify(cityList)=='{}'"></my-nodata>
		
		<scroll-view class="scroller" :scroll-into-view="toView" scroll-y="true" scroll-with-animation="true" v-show="JSON.stringify(cityList)!='{}'">
			<view class="group" v-for="(val, key) in cityList" :key="key">
				<view class="title padding" :id="key">
					{{key==0?'热门':key}}
				</view>
				<view class="list flex-row padding-lr padding-bottom flex-wrap">
					<view class="item" v-for="i in val" :key="i.id" @click="setCity(i)">
						{{i.city}}
					</view>
				</view>
			</view>
		</scroll-view>

		<view class="index-bar">
			<view class="index" v-for="(val, key) in cityList" :key="key" :data-id="key" @click="bindToView">
				{{key==0?'':key}}
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				scrollTop: 0,
				cityList: {},
				toView: '',
				keywords: ''
			};
		},
		onLoad() {
			this.getCity();
		},
		onPageScroll(e) {
			this.scrollTop = e.scrollTop;
		},
		methods: {
			getCity() {
				this.$u.api.getCity().then(res => {
					this.cityList = res.data.result.city_array
				})
			},
			setCity(city) {
				this.$store.commit('setCity', city)
				this.$u.get('/city/pick?city=' + city.city)
				this.$goto(1)
			},
			bindToView(event) {
				var id = event.currentTarget.dataset.id;
				this.toView = id;
			},
			getSearch() {
				this.$u.api.getCity({keywords: this.keywords}).then(res => {
					this.cityList = res.data.result.city_array
				})
			}
		}
	}
</script>

<style lang="scss">
	page {
		background: #fff;
	}
	
	.topbar {
		background: #fff;
		.btn {
			padding-right: 24rpx;
		}
	}
	
	.search-bar {
		position: relative;
		.search {
			width: 540rpx;
			height: 64rpx;
			background: rgba(232, 232, 232, 1);
			border-radius: 8rpx;
			padding: 0 16rpx;
			font-size: 24rpx;
		}
		.icon {
			position: absolute;
			right: 0;
			top: 50%;
			transform: translate(-50%, -50%);
		}
	}
	
	.scroller {
		height: 100vh;
	}
	.group {
		.title {
			font-size: 32rpx;
			font-family: PingFangSC-Medium, PingFang SC;
			font-weight: 500;
			color: rgba(51, 51, 51, 1);
		}

		.item {
			min-width: 200rpx;
			height: 60rpx;
			background: rgba(245, 245, 245, 1);
			display: flex;
			justify-content: center;
			align-items: center;
			margin-top: 32rpx;
			margin: 32rpx 15rpx 0 15rpx;
			padding: 0 24rpx;
			font-size: 28rpx;
			font-family: PingFangSC-Regular, PingFang SC;
			font-weight: 400;
			color: rgba(51, 51, 51, 1);
		}
	}

	.index-bar {
		width: 50rpx;
		height: 100vh;
		position: fixed;
		top: 0;
		right: 0;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		font-size: 20rpx;
		font-family: PingFangSC-Medium, PingFang SC;
		font-weight: 500;
		color: rgba(238, 188, 128, 1);

		.index {
			margin: 4rpx 0;
		}
	}
</style>
